require('./PageAddgrade.styl');
import { Boxs, Popup,Dialog, Toast, NavBar, Context, Scroller, SelectField } from 'saltui';
import ToastError from 'salt-icon/lib/ToastError';
import { Control } from 'react-keeper';
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const classNames = require("classnames")
const { HBox, Box, VBox } = Boxs;
const Filter = require('images/svg/filter.svg');
var timeId = '';
var typeId = '';
var title = '请选择时间批次 检查类别'
var value = { text: '全部' };
var classifyId = '';
class Addgrade extends React.Component {

    constructor(props) {
        super(props);
        if (this.props.params.origin == 'new') {
            timeId = '';
            typeId = '';
            title = '请选择时间批次 检查类别'
            value = { text: '全部' };
        }
        this.state = {
            visible: false,//选项
            popcontent: [],//有
            sanitationClassify: [],//卫生类别有
            title,
            listdata: [],//卫生区域列表有
            value: value
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handlePop = this.handlePop.bind(this);
        this.handleClickPopitem = this.handleClickPopitem.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleClicklistitem = this.handleClicklistitem.bind(this);
        this.handleClickBtn = this.handleClickBtn.bind(this);

        this.timeId = timeId;
        this.typeId = typeId;
        this.classifyId = classifyId;
    }
    handleOnLeftClick() {
        Control.go("/home");
    }
    handleClickPopitem(e) {
        let value = e.target.dataset["id"];
        let arr = value.split(",");
        let popcontent = this.state.popcontent;
        popcontent[arr[0]].content[arr[1]].isslect = !popcontent[arr[0]].content[arr[1]].isslect;
        for (let [key, item] of popcontent[arr[0]].content.entries()) {
            if (arr[1] != key) {
                item.isslect = false;
            } else {
                if (item.isslect) {
                    this[`select${arr[0]}`] = item;
                    if (arr[0] == 0) {
                        this.timeId = item.id;
                    } else {
                        this.typeId = item.id;
                    }
                } else {
                    this[`select${arr[0]}`] = '';
                    this.timeId = '';
                    this.typeId = '';
                }
            }
        }
        this.setState({ popcontent })
    }
    handlePop() {
        this.setState({ visible: true })
    }
    handleChange(value) {
        if (value.text == this.state.value.text) {
            return;
        }
        if (this.timeId && this.typeId) {
            classifyId = value.id
            Actions.getSanitationLocationList({ timeId: this.timeId, typeId: this.typeId, classifyId: value.id })
        }
        this.setState({
            value,
        });
    }
    handleClicklistitem(e) {
        let id = e.target.dataset["id"];
        let { scoreId, placeId } = this.state.listdata[id];
        Control.go('/home/addgradecontent', { placeId, scoreId, typeId: this.typeId, timeId: this.timeId })
    }
    handleClickBtn() {
        let popcontent = this.state.popcontent;
        let text = '';
        for (let key in popcontent) {
            if (!this[`select${key}`]) {
                Dialog.alert({
                    title: '提示',
                    content: '时间和类别不能为空',
                    onConfirm() {
                    },
                  });
                return;
            } else {
                text += this[`select${key}`].name + "  ";
            }
        }
        this.setState({ visible: false, title: text });
        if (this.timeId && this.typeId) {
            Actions.getSanitationLocationList({ timeId: this.timeId, typeId: this.typeId })
        }

    }
    render() {
        let t = this;
        return (
            <div className="addgrade">
                <NavBar
                    className={classNames("my-navbar", { "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title="打分列表"
                    onLeftClick={this.handleOnLeftClick.bind(this)}
                    onRightClick={Context.noop}
                    rightText=''
                />
                <div className="addgrade-select-box">
                    <HBox vAlign="center" onClick={this.handlePop} className="head">
                        <Box flex={1}>
                            {this.state.title}
                        </Box>
                        <Box flex={1} className="t-FAR">
                            <Filter width="15" />
                        </Box>
                    </HBox>
                    <Popup
                        content={(
                            <div >
                                {this.state.popcontent && this.state.popcontent.map((item, index) => {
                                    return (
                                        <div className="t-PT10 pop-item-head">
                                            <div>{item.title}</div>
                                            <HBox className="t-MT10 t-PB10" vAlign="center">
                                                {item.content.map((subitem, subindex) => {
                                                    return (
                                                        <Box data-id={`${index},${subindex}`} onClick={this.handleClickPopitem} className={classNames("pop-item", { "btntitle-color": subitem.isslect })}>{subitem.name}</Box>
                                                    )
                                                })}
                                            </HBox>
                                        </div>
                                    );
                                })}
                                <div className="pop-item-head t-PT10 t-PB10 line"><div className="btn" onClick={this.handleClickBtn}>确定</div></div>
                            </div>
                        )}
                        animationType="slide-down"
                        onMaskClick={() => { this.setState({ visible: false }); }}
                        visible={this.state.visible}
                        className={classNames({ "my-popup-mask": window.isIphone })}
                    />
                    {this.timeId && this.typeId && 
                    <Scroller autoRefresh={true} >
                        <SelectField
                            label=""
                            options={this.state.sanitationClassify}
                            onSelect={this.handleChange}
                            value={this.state.value}
                            placeholder=""
                        />
                        {this.state.listdata.map((item, index) => {
                            return (
                                <HBox vAlign="center" key={`list${index}`} onClick={this.handleClicklistitem} className="addgrade-list-item" data-id={index}>
                                    <Box flex={1} data-id={index}>{item.placeName}</Box>
                                    <Box flex={1} data-id={index} className={classNames("t-FAR", { "color": !item.score })}>{item.score || '未打分'}</Box>
                                </HBox>
                            )
                        })}
                    </Scroller>}
                </div>
            </div>
        );
    }

    componentWillMount() {

    }

    componentDidMount() {
        let cb = () => {
            Actions.getSanitationLocationList({ timeId: this.timeId, typeId: this.typeId, classifyId: this.classifyId })
        }
        Actions.fetch({ origin: this.props.params.origin },cb);
        if(this.props.params.origin=="new"){
            Actions.getSanitationClassifyList();
        }        
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        if (this.timeId && this.typeId) {
            timeId = this.timeId;
            typeId = this.typeId;
        }
        title = this.state.title
        value = this.state.value
    }
}

reactMixin.onClass(Addgrade, Reflux.connect(Store));

module.exports = Addgrade;
